<template>
  <div>
    <header class="header">
      <comp-header>
        <template v-slot:ctitle>消息</template>
        <template v-slot:cicon
          ><span class="fa fa-align-justify"></span
        ></template>
      </comp-header>
    </header>
    <div class="my-info">
      <ul>
        <li v-for="item in info" :key="item.id">
          <a href="javascript:;">
            <div class="left">
              <img :src="item.img" alt="" />
            </div>
            <div class="right">
              <div class="top">
                <h4>{{item.name}}</h4>
                <div>{{item.time}}</div>
              </div>
              <div class="bottom">
                <span>{{item.content}}</span>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import compHeader from "@/components/comp-header.vue";
export default {
  name: "Info",
  components: {
    compHeader: compHeader,
  },
  data() {
    return {
      info: [],
    };
  },
  methods: {
    getData() {
      let pro = axios.get("/myinfo.jsonp");
      pro.then((response) => {
        if (response.data.code == 200) {
          let res = response.data.result;
          let arr = [];
          res.forEach((item) => {
            let obj = {};
            obj.img = require("../assets/" + item.picUrl);
            obj.id = item.id;
            obj.name = item.name;
            obj.time = item.time;
            obj.content = item.content;
            arr.push(obj);
          });
          this.info = arr;
        }
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  background-color: #111030;
}
.my-info {
  margin-top: 20px;
  width: 100%;
  margin-bottom: 80px;
  ul {
    width: 330px;
    margin: 0 auto;
    li {
      width: 100%;
      height: 110px;
      border-radius: 10px;
      box-shadow: 0 0 5px #ccc;
      overflow: hidden;
      margin-bottom: 20px;
      a {
        width: 100%;
        height: 100%;
        display: flex;
        .left {
          width: 105px;
          height: 100%;
          img {
            width: 100%;
            height: 110px;
          }
        }
        .right {
          width: 225px;
          height: 100%;
          padding: 25px 10px;
          box-sizing: border-box;
          .top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            h4 {
              font-size: 14px;
              font-weight: normal;
            }
            div {
              font-size: 12px;
              color: #999;
            }
          }
          .bottom {
            margin-top: 10px;
            line-height: 25px;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>